<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>电影推荐</title>
	<link rel="stylesheet" href="/layui/css/layui.css"/>
	<link rel="icon" href="images/logo2.png" >
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<!-- CSS ================================================== -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<style type="text/css">
		.movie-block{
			/* position: absolute; */
		}
		.movie-gird{
			display: flex;
			justify-content:center;
			text-align: center;
		}
		li{
			list-style: none;
			margin-right: 10px;
		}
	</style>

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
	<div class="layui-header">
		<div class="layui-logo">睿道电影推荐</div>
		<ul class="layui-nav layui-layout-left">

		</ul>
		<ul class="layui-nav layui-layout-right">
			<li class="layui-nav-item">
				<a href="javascript:;" id="userId">
					<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
				</a>
				<script>
					var data = sessionStorage.getItem("userdId");
					document.getElementById("userId").innerText = data +" 欢迎登录";
				</script>
				<dl class="layui-nav-child">
					<dd><a href="">基本资料</a></dd>
					<dd><a href="">安全设置</a></dd>
				</dl>
			</li>
			<li class="layui-nav-item"><a href="login.html">退出</a></li>
		</ul>
	</div>
</div>

<div class="layui-row layui-col-space10">
	<div class="layui-col-lg4">

	</div>
	<div class="layui-col-lg4">
		<div>
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<div class="layui-row layui-col-lg12" style="white-space: nowrap">
						<label class="layui-form-label">电影</label>
						<div class="layui-input-inline" style="width: 400px;">
							<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="搜索电影" class="layui-input" id="searchMov"/>
						</div>
						<button type="button" class="layui-btn layui-icon layui-icon-search" id="searchBtn"></button>
					</div>
					<script type="text/javascript">
						$("#searchBtn").click(function(){
							var sp = $("#searchMov").val();
							if(sp == null || sp.length==0){
								alert("搜索不能为空");
								return;
							}
							var uri = encodeURI("searchMovList.html?movieName="+sp);
							window.location.href = uri;
						})
					</script>
				</div>
			</form>
		</div>
	</div>
	<div class="layui-col-lg4">

	</div>
</div>

<div class="layui-row layui-col-space10">
	<div class="layui-col-lg3">

	</div>
	<div class="layui-col-lg6">
		<div class="movie-block">
			<ul id="ul1" class="movie-gird">
				<li>
					<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2282434035.jpg' /></div>
					<div><p>巴拉巴拉</p></div>
				</li>
				<li>
					<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2282434035.jpg' /></div>
					<div><p>巴拉巴拉</p></div>
				</li>
				<li>
					<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2282434035.jpg' /></div>
					<div><p>巴拉巴拉</p></div>
				</li>
				<li>
					<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2282434035.jpg' /></div>
					<div><p>巴拉巴拉</p></div>
				</li>
			</ul>
			<ul id="ul2" class="movie-gird">
				<li>
					<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2282434035.jpg' /></div>
					<div><p>巴拉巴拉</p></div>
				</li>
				<li>
					<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2282434035.jpg' /></div>
					<div><p>巴拉巴拉</p></div>
				</li>
				<li>
					<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img3.doubanio.com/view/movie_poster_cover/lpst/public/p2282434035.jpg' /></div>
					<div><p>巴拉巴拉</p></div>
				</li>
				<li>
					<div><img title='1' alt='电影封面' width='115px' height='164px' src='https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2260088337.jpg' /></div>
					<div><p>巴拉巴拉</p></div>
				</li>
			</ul>
		</div>

		<div class="pager-container" style="text-align: center; margin-left: 52px;">
			<nav aria-label="Page navigation">
				<ul class="pagination">
					<li>
						<a href="#" aria-label="Previous">
							<span aria-hidden="true">&laquo;</span>
						</a>
					</li>
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li>
						<a href="#" aria-label="Next">
							<span aria-hidden="true">&raquo;</span>
						</a>
					</li>
				</ul>
			</nav>
		</div>

		<script type="text/javascript">
			var page1 = 1;
			var psize1 = 8;
			function page(pn,ps){
				console.log("pn"+pn);
				console.log("ps"+ps);
				page1 = pn;
				psize1 = ps;
				$.ajax({
					type:"get",
					url:"http://localhost:8888/listMovies.do",
					data:{
						"pageNum":pn,
						"pageSize":ps
					},
					dataType:"json",
					success:function(response){
						console.log(response);
						var movies = response.data.list;
						$(".movie-gird").empty();
						// 分页数据
						for(var i=0;i<movies.length;i++){
							var li = $("<li></li>");
							li.append("<div><a target='_blank' href='recommend.html?movieId="+movies[i].movieId+"'><img title='"+movies[i].movieName+"' alt='Movies' width='115px' height='164px' src='"+movies[i].imgurl+"'/></a></div>");
							li.append("<div><p>"+movies[i].movieName+"</p></div>");
							if(i>=0 && i<=3){
								$("#ul1").append(li);
							}
							if(i>3 && i<=7){
								$("#ul2").append(li);
							}
						}
						// 分页导航栏
						var navs = response.data.navigatepageNums;
						$(".pagination").empty();
						$(".pagination").append("<li onclick='page("+(page1-1)+","+psize1+")'><a aria-label='Previous'><span aria-hidden='true'>&laquo;</span></a></li>");
						for(var i=0;i<navs.length;i++){
							$(".pagination").append("<li onclick='page("+navs[i]+","+psize1+")'><a>"+navs[i]+"</a></li>");
						}
						$(".pagination").append("<li onclick='page("+(page1+1)+","+psize1+")' ><a aria-label='Next'><span aria-hidden='true'>&raquo;</span></a></li>");
					}
				})
			}
			$(function(){
				page(page1,psize1);
			})
		</script>
	</div>
	<div class="layui-col-lg3">

	</div>
</div>

<script src="/layui/layui.js"></script>
<script>
	layui.use(['jquery','layer','element'],function(){
		var $=layui.jquery;
		var layer=layui.layer;
		var element = layui.element;

	});
</script>
</body>
</html>